<template>
  <div class="pdf-container">
    <VuePdfApp :pdf="pdfUrl" :config="config" :style="viewerStyle" @pages-rendered="onPagesRendered" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'

const pdfUrl = ref(`http://127.0.0.1:8080/g1234.pdf`)
const viewerStyle = ref({
  width: '100%',
  height: '100vh'
})

const config = ref({
  sidebar: {
    viewThumbnail: false,
    viewOutline: false
  },
  secondaryToolbar: {
    secondaryDownload: false,
    secondaryPrint: false,
    secondaryZoom: false
  },
  toolbar: {
    viewFind: false,
    viewThumbnail: false,
    viewOutline: false
  }
})
  const toolbars = document.querySelectorAll('.toolbar, .secondary-toolbar')
  toolbars.forEach(el => el.remove())
const onPagesRendered = () => {
  const toolbars = document.querySelectorAll('.toolbar, .secondary-toolbar')
  toolbars.forEach(el => el.remove())
}
</script>

<style scoped>
.pdf-container {
  background-color: #f5f5f5;
  height: calc(100vh - 40px - 64px);
  overflow: auto;

  padding: 0 20px;
  /* 保留侧边间距 */
  /* padding: 20px; */
}

::v-deep .pdf-app .pdfViewer .page {

  /* border: 9px solid #dfdfdf00; */
  border: none;
  padding-bottom: 24px;
}



.pdf-app.light {
  --pdf-app-background-color: #F2F3F5;
}
</style>
